<template>
	<!-- 武威监狱版本 -->
	<view>
		<view v-if="code==''">
			<!-- 头部搜索框 -->
			<search :placeholder="$t('homepage.CutMarket.carCode')" />
			<!-- 搜索无记录 -->
			<zy-empty></zy-empty>
		</view>
		<view v-else>
			<!-- 头部搜索框 -->
			<view class="topSearch">
				<zy-forms :model="model" ref="ruleForm" labelWidth='120'>
					<zy-form-item :label="$t('public.styleNo') + $t('public.colon')">
						<zy-input v-model="model.styleNo" @confirm="confirmHandle" sufSlot>
							<i class="iconfont icon-saoyisao" @click="scanHandle('styleNo')" v-if="!model.styleNo"></i>
							<i class="iconfont icon-qingchu" @click="model.styleNo=''" v-else></i>
						</zy-input>
					</zy-form-item>
					<view v-if="formShow">
						<zy-form-item :label="$t('public.styleName') + $t('public.colon')">
							<zy-input v-model="model.styleName" @confirm="confirmHandle" sufSlot>
								<i class="iconfont icon-saoyisao" @click="scanHandle('styleName')"
									v-if="!model.styleName"></i>
								<i class="iconfont icon-qingchu" @click="model.styleName=''" v-else></i>
							</zy-input>
						</zy-form-item>
						<zy-form-item :label="$t('public.color') + $t('public.colon')">
							<zy-input v-model="model.color" @confirm="confirmHandle" sufSlot>
								<i class="iconfont icon-saoyisao" @click="scanHandle('color')" v-if="!model.color"></i>
								<i class="iconfont icon-qingchu" @click="model.color=''" v-else></i>
							</zy-input>
						</zy-form-item>
						<zy-form-item :label="$t('public.size') + $t('public.colon')">
							<zy-input v-model="model.size" @confirm="confirmHandle" sufSlot>
								<i class="iconfont icon-saoyisao" @click="scanHandle('size')" v-if="!model.size"></i>
								<i class="iconfont icon-qingchu" @click="model.size=''" v-else></i>
							</zy-input>
						</zy-form-item>
					</view>
					<view class="arrowStyle">
						<i :class="formShow?'iconfont icon-xiangshang1':'iconfont icon-xiangxia1'"
							@click="formShow = !formShow"></i>
					</view>
				</zy-forms>
			</view>
			<!-- 生产单列表 -->
			<zy-table :headList="headList" :dataList="dataList" border></zy-table>
			<!-- 底部按钮 -->
			<bottomBtn fixed :leftText="$t('public.reset')" :rightText="$t('public.submit')" @rightBtn="submit"
				@leftBtn="resetBtn" :rightDisabled="dataList.length>0?false:true">
			</bottomBtn>
			<!-- 提交二次确认 -->
			<zy-popup ref="popup" :title="$t('public.instorageSure')" type="dialog" @confirm="submitBtn">
				{{$t('homepage.CutMarket.isSureInstorage')}}
			</zy-popup>
		</view>
	</view>
</template>
<script>
	import {
		productionColorSizeList,
		saveCarWarehouse
	} from "@/api/homepage.js"
	import scanData from '@/common/scan.js';
	export default {
		components: {},
		data() {
			return {
				code: "",
				//表单value
				model: {
					styleNo: '',
					styleName: '',
					color: '',
					size: '',
				},
				formShow: false, //查询表单默认不显示
				selectedType: '', //父组件传值子组件，置空全选框
				// 表头数据
				headList: [{
					name: this.$t('public.num'),
					key: 'csNum',
					edit: true,
					type: 'number',
					sum: true
				}, {
					name: this.$t('public.productionNo'),
					key: 'productionNo'
				}, {
					name: this.$t('public.styleNo'),
					key: 'styleNo'
				}, {
					name: this.$t('public.styleName'),
					key: 'styleName'
				}, {
					name: this.$t('public.color'),
					key: 'color'
				}, {
					name: this.$t('public.size'),
					key: 'size'
				}],
				dataList: [], // 表格数据
				editData: [], //编辑数量后表格数据
			}
		},
		onLoad() {
			//PDA扫描主页校小车码
			var _this = this
			uni.$on('scancodedate', function(data) {
				_this.searchList(data.code)
			})
		},
		onUnload() {
			// 移除监听事件      
			uni.$off('scancodedate')
		},

		methods: {
			// 二维码扫码事件
			scanHandle(field) {
				scanData.getScanData()
				uni.$once("barScan", (rel) => {
					this.model[field] = rel
					this.searchFormList()
				})
			},
			// input框回车事件
			confirmHandle() {
				this.searchFormList()
			},
			// 查询事件
			searchList(e) {
				if (!this.code) {
					this.code = e
				} else {
					if (!this.model.styleNo) {
						this.model.styleNo = e
					} else if (!this.model.styleName) {
						this.model.styleName = e
					} else if (!this.model.color) {
						this.model.color = e
					} else if (!this.model.size) {
						this.model.size = e
					}
					this.searchFormList()
				}
			},
			// 表单查询事件
			searchFormList() {
				// 表格的数量
				this.editData = []
				this.dataList.forEach((item, index) => {
					if (item.csNum > 0) {
						this.editData.push(item)
					}
				})
				this.dataList = []
				productionColorSizeList({
					styleNo: this.model.styleNo,
					styleName: this.model.styleName,
					color: this.model.color,
					sizes: this.model.size,
				}).then((res) => {
					if (res.code == 0) {
						let data = res.data
						data.forEach((item, index) => {
							item.csNum = 0
						})
						if (this.editData.length == 0) {
							this.dataList = data
						} else {
							// 过滤已编辑数量过的数据
							let result = data.filter((item) => {
								return this.editData.every((item1) => {
									return item.productionColorSizeId != item1
										.productionColorSizeId;
								})
							})
							this.dataList = this.editData.concat(result)
						}
					} else {
						this.dataList = this.editData
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000
						})
					}
				}).catch((res) => {
					this.dataList = this.editData
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 3000
					})
				})
			},
			// 点击多选框
			handleSelectionChange(e) {
				e.value.forEach((item) => {
					this.selectedData.push(item)
				})
			},
			// 重置事件
			resetBtn() {
				uni.redirectTo({
					url: "/pages/HomePage/CutMarket/InStorage/index"
				})
			},
			// 二次提交确认弹窗
			submit() {
				this.$refs.popup.open()
			},
			// 问题数量输入
			questionNumChange(e) {
				this.num = e
			},
			//弹窗取消事件
			cancel() {
				this.$refs.popup.close()
			},
			// 提交事件
			submitBtn() {
				let data = []
				this.dataList.forEach((item, index) => {
					this.$delete(item, 'editColor');
					if (item.csNum && item.csNum > 0) {
						data.push(item)
					}
				})
				console.log(this.code, data)
				saveCarWarehouse({
					carCode: this.code,
					dataArray: JSON.stringify(data),
				}).then((res) => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 3000
					})
					this.$refs.popup.close()
					if (res.code == 0) {
						this.resetBtn()
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 3000
					})
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.topSearch {
		background: #ffffff;
		padding: 0 30rpx;
		width: calc(100% - 60rpx);
	}

	.arrowStyle {
		background: #ffffff;
		margin: 5px auto;
		text-align: center;
	}

	.line {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		padding: 0 50rpx;
	}

	.line_text {
		margin: auto 0;
	}
</style>